import React, { Component } from "react";
import "../assets/css/Menu.css";
import { SearchBar } from "antd-mobile";
import MenuProductItem from "../components/MenuProductItem";
import Loading from "../components/Loading";

class Menu extends Component {
  constructor(props) {
    super(props);

    this.state = {
      typeList: null,
      currentProducts: null,
      searchText: "",
      currentIndex: 0,
    };
    this.changeSearch = this.changeSearch.bind(this);
    this.search = this.search.bind(this);
    this.toggleType = this.toggleType.bind(this);
  }

  toggleType(id, key, value) {
    this.setState({
      currentProducts:""
    })
    this.$axios
      .get("/typeProducts", {
        params: {
          key,
          value,
        },
      })
      .then((res) => {
        this.setState({
          currentIndex: id,
          currentProducts: res.data.result,
        });
      });
  }
  search() {
    this.props.history.push("/searchResult/" + this.state.searchText);
  }
  changeSearch(value) {
    this.setState({
      searchText: value,
    });
  }

  componentWillMount() {
    this.$axios
      .get("/type")
      .then((res) => {
        this.setState({
          typeList: res.data.result,
        });
      })
      .then(() => {
        this.$axios
          .get("/typeProducts", {
            params: {
              key: "isHot",
              value: 1,
            },
          })
          .then((res) => {
            this.setState({
              currentProducts: res.data.result,
            });
          });
      });
  }

  render() {
    return this.state.typeList ? (
      this.state.typeList && (
        <div className="Menu">
          <SearchBar
            onSubmit={this.search}
            onChange={this.changeSearch}
            value={this.state.searchText}
            placeholder="请输入搜索商品名称"
          />
          <ul className="menu_typeList">
            <li
              onClick={() => this.toggleType(0, "isHot", 1)}
              className={0 === this.state.currentIndex ? "active" : ""}
            >
              热卖推荐
            </li>
            {this.state.typeList.map((item) => {
              return (
                <li
                  onClick={() => this.toggleType(item.id, "type", item.type)}
                  className={
                    item.id === this.state.currentIndex ? "active" : ""
                  }
                  key={item.id}
                >
                  {item.typeDesc}
                </li>
              );
            })}
          </ul>
          <div
            className="slidingBlock"
            style={{ top: `${this.state.currentIndex * 50 + 45}px` }}
          ></div>
          <div className="menu_productList_box">
            <ul className="menu_productList">
              {this.state.currentProducts ?
                this.state.currentProducts.map((item) => {
                  return (
                    <MenuProductItem
                      key={item.id}
                      item={item}
                    ></MenuProductItem>
                  );
                }) : <Loading></Loading> }
            </ul>
          </div>
        </div>
      )
    ) : (
      <Loading></Loading>
    );
  }
}

export default Menu;
